import { watch, ref } from 'vue';

export function useAnimatedWatcher(variable, animationClass, duration) {
    const animationClassRef = ref('');

    watch(variable, (newValue, oldValue) => {
        if (newValue !== oldValue) {
            // 添加动画类
            animationClassRef.value = animationClass;
            // 移除动画类以便下次触发动画
            setTimeout(() => {
                animationClassRef.value = '';
            }, duration);
        }
    });

    return animationClassRef;
}

// // 使用示例
//
// // 假设我们有这两个响应式变量
// const message = ref('');
// const showCarMess = ref(false);
//
// // 使用封装的函数
// const animateClass = useAnimatedWatcher(message, 'animate-fade', 700);
// const animateCarMessClass = useAnimatedWatcher(showCarMess, 'animateCarMessClass', 700);

